<template>
	<view class="">
		<navigator url="/pages/index/index" open-type="reLaunch">父组件(去首页)</navigator> <!--路由跳转-->
	</view>

	<mall-child :username="userInfo[0].name" avatar="../../static/logo.png"></mall-child> <!--props父传子1基本类型-->
	<mall-child v-for="(item,index) in userInfo" :obj="item"></mall-child> <!--props父传子2对象-->

	<mall-child>
		<template #child>child插槽</template> <!--插槽:父传子(简写具名插槽)-->
	</mall-child>

	<mall-child @add="onAdd"></mall-child> <!--$emit子传父数据(子必须是组件,不能是路由页面)-->

	<mall-child ref="child"></mall-child> <!--defineExpose父操作子暴露的数据-->
	<button @click="update">defineExpose父操作子暴露的方法</button>
	
	<view @click="goBrother">去兄页面</view>
	<view @click="request1">发送请求</view>{{arrs}}
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue"
	let data = ref(1) //响应式数据

	const userInfo = ref([{
		name: "zhangsan",
		avatar: "../../static/logo.png"
	}]) //props父传子2对象

	const onAdd = function(e) { //$emit接收数据
		console.log(e)
	}

	const child = ref(null) //defineExpose父操作子暴露的数据
	onMounted(() => {
		console.log(child.value)
	})
	const update = function() { //defineExpose父操作子暴露的方法
		child.value.updateCount()
	}
	
	function goBrother() { //页面路由Api方式
		// uni.navigateTo({ //页面
		// 	url: '/pages/mall-brother/mall-brother?name=zhangshan'
		// })
		uni.reLaunch({ //tabBar页
			url: '/pages/mall-brother/mall-brother?name=zhangshan'
		})
		let page = getCurrentPages() //当前页面
		uni.navigateBack() //返回上一页
		// uni.$emit('eventName', {msg: '参数'}) //触发全局自定义事件
	}
	
	uni.setStorageSync('uid', '123667') //同步缓存
	let uid = uni.getStorageSync('uid') //获取缓存中数据
	let all = uni.getStorageInfoSync() //获取缓存中全部数据的key
	uni.removeStorageSync('uid') //删除某个缓存
	uni.clearStorageSync() //清空缓存
	console.log(all)
	
	let arrs = ref([])
	function request1() { //发送请求1:回调方式,传统写法,嵌套较多时可读性差,适合简单场景
		uni.request({
			// url: 'https://jsonplaceholder.typicode.com/posts/1',
			// url: 'https://jsonplaceholder.typicode.com/posts?id=1',
			url: 'https://jsonplaceholder.typicode.com/posts',
			data: {
				id: 1
			},
			method: 'post',
			header: {
				token: 'dgegwdfg',
				'content-type': 'application/json'  //'application/x-www-form-urlencoded'
			},
			timeout: 1000, //5秒,默认1分钟
			success: res => {
				arrs.value = res.data
			},
			fail: error => {
				console.log(error)
			},
			complete: () => { //成功与否都会走
				uni.hideLoading()
			}
		})
	}
	function request2() { //发送请求2:Promise.then方式,解决回调嵌套问题,链式调用更清晰
		uni.request({
			url: 'https://jsonplaceholder.typicode.com/posts?id=1'
		}).then(res=>{
			arrs.value = res.data
		})
	}
	async function request() { //发送请求3:async/await方式,语法糖,将异步代码写得像同步代码,可读性最佳,推荐使用
		let res = await uni.request({
			url: 'https://jsonplaceholder.typicode.com/posts'
		})
		arrs.value = res.data
	}
</script>

<style lang="scss" scoped>
	//嵌套css,样式作用域(样式仅当前组件生效)
</style>